<template>
  <div class="await">
    <SearchBar class="form" @onSearch="handleSearch" @childFn="resetForm">
      <SearchBarItem label="清分批号：" :labelLg="8">
        <Input type="text" v-model="searchDeteleModule.clearBatchNo" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="子商户号：" :labelLg="8">
        <Input type="text" v-model="searchDeteleModule.subMchId" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="外部订单号：" :labelLg="8">
        <Input type="text" v-model="searchDeteleModule.orderId" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="招行订单号：" :labelLg="8">
        <Input type="text" v-model="searchDeteleModule.bankOrderId" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="子订单号：" :labelLg="8">
        <Input type="text" v-model="searchDeteleModule.subOrderId" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="清分金额：" :labelLg="8">
        <Input type="number" v-model="searchDeteleModule.clearAmount" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="付款账户名：" :labelLg="8">
        <Input type="text" v-model.trim="searchDeteleModule.payAcctName" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="收款账户名：" :labelLg="8">
        <Input type="text" v-model="searchDeteleModule.colAcctName" placeholder="请输入" clearable />
      </SearchBarItem>
      <SearchBarItem label="订单日期：" :labelLg="8">
        <DatePicker type="daterange" class="timeWidth" ref="createDatePicker" transfer :value="searchDeteleModule.dataTime" split-panels placeholder="请选择" @on-change="searchTime"></DatePicker>
      </SearchBarItem>
    </SearchBar>
    <RemoteTable :namespace="namespace" :columns="columnsDetele" @onSortChange="onSortChange" ref="tableData">
      <template #extra>
        <Authc permissions="trade:settlement:bill:BankBill:export">
          <Button type="primary" @click="downloadCollect">下载对账单</Button>
        </Authc>
      </template>
    </RemoteTable>
    <!-- <div class="loadMoreBtn">
      <Button type="primary">加载更多</Button>
    </div> -->

    <!-- 汇总弹窗 -->
    <Modal v-model="isShow" :visible.sync="isShow" title="对账单明细文件下载">
      <Loading :loading="false">
        <Form ref="dataModule" :label-width="130" :model="dataModule" :rules="ruleValidate">
          <FormItem prop="collectTime" label="文件日期：" style="width:100%">
            <DatePicker type="daterange" v-model="dataModule.collectTime" format="yyyy-MM-dd" transfer placeholder="请选择" @on-change="setDateRange" clearable></DatePicker>
          </FormItem>
        </Form>
      </Loading>
      <div slot="footer">
        <Button type="primary" style="width: 100px" @click="handleSubmit('dataModule')">点击下载</Button>
        <Button style="margin-right: 8px; width: 100px" @click="isShow = false">返回</Button>
      </div>
    </Modal>

  </div>
</template>
<script>
import {
  Button,
  Input,
  Modal,
  Message,
  Col,
  Row,
  Form,
  FormItem,
  DatePicker,
  Select,
  Option,
  Card,
  Tabs,
  TabPane,
} from "view-design";
import Loading from "@/components/Loading";
import RemoteTable from "@/components/RemoteTable";
import SearchBar from "@/components/SearchBar";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../../Module/bankBillDetailModule";
import Authc from "@/components/Authc";
import Tables from "@/components/tables";
import Action from "./Action";
import config from "@/utils/config";
import util from "@/utils/util";
import appService from "@/utils/appService";

export default {
  name: "clearingAbnormal",
  components: {
    Loading,
    RemoteTable,
    SearchBar,
    SearchBarItem: SearchBar.SearchBarItem,
    RemoteSelect,
    Authc,
    Action,
    Tables,
    Button,
    Input,
    Modal,
    Message,
    Col,
    Row,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    Card,
    Tabs,
    TabPane,
  },
  data() {
    const validateDaterange = (rule, value, callback) => {
      if (Array.isArray(value)) {
        if (!value[0] || !value[1]) {
          callback(new Error("日期不能为空"))
        } else {
          callback()
        }
      } else {
        callback()
      }
    };
    return {
      namespace: namespace,
      isClear: true,
      loading: true,
      isShow: false,
      searchModule: {
        dataTime: [],
        verificationTime: [],
        rectifyTime: []
      }, //查询条件
      searchDeteleModule: [],
      columnsDetele: [
        {
          title: "序号",
          type: "index",
          align: "center",
          // fixed: 'left',
          minWidth: 80
        },
        {
          title: "订单日期",
          key: "payTime",
          align: "center",
          // fixed: 'left',
          minWidth: 100
        },
        {
          title: "清分批号",
          key: "clearBatchNo",
          align: "center",
          minWidth: 180
        },
        {
          title: "子商户号",
          key: "subMchId",
          align: "center",
          minWidth: 180,
        },
        {
          title: "外部订单号",
          key: "orderId",
          align: "center",
          minWidth: 180
        },
        {
          title: "招行订单号",
          key: "bankOrderId",
          align: "center",
          minWidth: 240
        },
        {
          title: "子订单号",
          key: "subOrderId",
          align: "center",
          minWidth: 180
        },
        {
          title: "清分金额(元)",
          key: "clearAmount",
          align: "center",
          minWidth: 120,
          render: (h, params) => {
            let item = params.row.clearAmount / 100;
            return h('span', util.toMoney(item));
          },
        },
        {
          title: "付款账户名",
          key: "payAcctName",
          align: "center",
          minWidth: 240
        },
        {
          title: "收款账户名",
          key: "colAcctName",
          align: "center",
          minWidth: 240
        }
      ],
      title: '',
      ruleValidate: {
        collectTime: [{ required: true, validator: validateDaterange, trigger: "change" }]
      },
      dataModule: {
        collectTime: []
      }
    };
  },
  created() {
    this.$store.commit(`${namespace}/reviseQuery`);
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$store.dispatch(`${namespace}/exportExcel`, this.dataModule).then(res => {
            util.exportExcle(res, '对账单明细列表');

            // if (res.status === 200) {
            //   let link = document.createElement('a');
            //   // let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
            //   // let objectUrl = URL.createObjectURL(blob); // 创建URL
            //   // a.setAttribute("href", objectUrl);
            //   // a.setAttribute("download", '对账单.xls'); // 自定义文件名
            //   // a.click(); // 下载文件
            //   // URL.revokeObjectURL(objectUrl); // 释放内存

            //   // 创建Blob对象，设置文件类型
            //   let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
            //   let objectUrl = URL.createObjectURL(blob) // 创建URL
            //   link.href = objectUrl
            //   link.download = '对账单明细文件.xlsx' // 自定义文件名
            //   link.click() // 下载文件
            //   URL.revokeObjectURL(objectUrl); // 释放内存
            // }
          })
          this.isShow = false;
          this.dataModule = {};
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 对账单汇总文件下载
    setDateRange (val) {
      this.dataModule.collectTime = val;
      this.dataModule.batchDateBegin = val[0];
      this.dataModule.batchDateEnd = val[1];
    },
    // 交易时间
    searchTime (date, type) {
      this.searchDeteleModule.payTimeBegin = date ? date[0] : ''
      this.searchDeteleModule.payTimeEnd = date ? date[1] : ''
    },

    handleSearch() {
      let page = {
        currentPage: 1,
        pageSize: 10,
        clearAmount: this.searchDeteleModule.clearAmount * 100
      }
      this.$store.dispatch(`${namespace}/query`, { ...this.searchDeteleModule, ...page })
    },
    onSortChange(sort) {
      if (sort.order === "normal") {
        this.queryParam.order = [];
      } else {
        this.queryParam.order = [sort.key + " " + sort.order];
      }
      this.handleSearch();
    },
    // 清空事件；
    resetForm() {
      this.$set(this.searchDeteleModule, 'clearBatchNo', '');
      this.$set(this.searchDeteleModule, 'subMchId', '');
      this.$set(this.searchDeteleModule, 'orderId', '');
      this.$set(this.searchDeteleModule, 'bankOrderId', '');
      this.$set(this.searchDeteleModule, 'subOrderId', '');
      this.$set(this.searchDeteleModule, 'clearAmount', '');
      this.$set(this.searchDeteleModule, 'payAcctName', '');
      this.$set(this.searchDeteleModule, 'colAcctName', '');
      // 清空时间选择
      this.$refs["createDatePicker"].handleClear();
    },
    // 下载汇总对账单
    downloadCollect () {
      this.isShow = true;
      this.collectType = true;
      this.resetFormAll();
    },
    resetFormAll () {
      this.$refs['dataModule'].resetFields()
    },
  },
  async mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 1000);
  }
};
</script>

<style lang="less" scoped>
.await{
  .timeWidth{
    width: 100%;
  }
  .loadMoreBtn {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
